<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>bilibili</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/video.css"> <!-- 新增：引入登录模块样式 -->
    <link rel="icon" sizes="any" href="img/favicon.ico">
    <script src="js/index.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/fontawesome.js" crossorigin="anonymous"></script> <!-- 新增：Font Awesome图标 -->
</head>
<style>
	#pageBar button{
		color:black;
		text-decoration: none;
	}
	#pageBar{
		margin-top:-520px;
		position: relative;
		z-index: 100;
	}
	#pageBar .currentPage{
		border:0px;
		color:grey;
	}
	#pnA{
		width:24px;
		height:24px;
		display:inline-block;
		text-align:center;
		border:1px solid;
		margin-left:5px;
	}
</style>
<body>
    <header id="header">
        <!-- 图片内的首页以及下面的导航栏 -->
        <div id="logo_navigation">
            <!-- 图片内的首页 -->
            <div id="logo">
                <!-- 首页->投稿 -->
                <div id="logo_top">
                    <!-- 首页 -->
                    <div id="logo_top_left">
                        <a href="#">
                            <span class="span1">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                    xmlns="http://www.w3.org/2000/svg" class="zhuzhan-icon">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M3.73252 2.67094C3.33229 2.28484 3.33229 1.64373 3.73252 1.25764C4.11291 0.890684 4.71552 0.890684 5.09591 1.25764L7.21723 3.30403C7.27749 3.36218 7.32869 3.4261 7.37081 3.49407H10.5789C10.6211 3.4261 10.6723 3.36218 10.7325 3.30403L12.8538 1.25764C13.2342 0.890684 13.8368 0.890684 14.2172 1.25764C14.6175 1.64373 14.6175 2.28484 14.2172 2.67094L13.364 3.49407H14C16.2091 3.49407 18 5.28493 18 7.49407V12.9996C18 15.2087 16.2091 16.9996 14 16.9996H4C1.79086 16.9996 0 15.2087 0 12.9996V7.49406C0 5.28492 1.79086 3.49407 4 3.49407H4.58579L3.73252 2.67094ZM4 5.42343C2.89543 5.42343 2 6.31886 2 7.42343V13.0702C2 14.1748 2.89543 15.0702 4 15.0702H14C15.1046 15.0702 16 14.1748 16 13.0702V7.42343C16 6.31886 15.1046 5.42343 14 5.42343H4ZM5 9.31747C5 8.76519 5.44772 8.31747 6 8.31747C6.55228 8.31747 7 8.76519 7 9.31747V10.2115C7 10.7638 6.55228 11.2115 6 11.2115C5.44772 11.2115 5 10.7638 5 10.2115V9.31747ZM12 8.31747C11.4477 8.31747 11 8.76519 11 9.31747V10.2115C11 10.7638 11.4477 11.2115 12 11.2115C12.5523 11.2115 13 10.7638 13 10.2115V9.31747C13 8.76519 12.5523 8.31747 12 8.31747Z"
                                        fill="currentColor"></path>
                                </svg>
                            </span>
                            <span class="span2">首页</span>
                        </a>
                    </div>
                    <!-- 搜索框 -->
                    <div id="logo_top_middle">
                        <input type="text" id="likeVideoInput">
                        <!-- 搜索图片 -->
                        <div id="logo_top_middle_right">
                            <span>
                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z"
                                        fill="currentColor"></path>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <!-- 登录->投稿 -->
                    <div id="logo_top_right">
                        <ul>
                            <li>
                                <!-- 登录前显示登录按钮 -->
<div id="login" onclick="showLoginPopup()">
    <a href="javascript:void(0);">
        <span class="spanMsg">登录</span>
    </a>
</div>

<!-- 登录后显示用户头像 -->
<div class="user-avatar" id="userAvatar" style="display: none;">
    <img id="avatarImg" src="img/1.jpg" alt="用户头像">
    <div class="avatar-upload-btn">
        <i class="fa fa-camera"></i>
        <input type="file" class="avatar-input" accept="image/*" onchange="previewAvatar(this)">
    </div>
</div>

<!-- 退出登录悬浮窗 -->
<div class="user-menu" id="userMenu">
    <div class="user-menu-item" onclick="goToProfile()">
        <i class="fa fa-user"></i>
        <span>个人主页</span>
    </div>
    <div class="user-menu-divider"></div>
    <div class="user-menu-item logout" onclick="logout()">
        <i class="fa fa-sign-out"></i>
        <span>退出登录</span>
    </div>
</div>
                            </li>
                            <li>
                                <div>

                                </div>
                            </li>
                            <li>
                            </li>
                            <li>
                                <div>
                                    <a href="personalCenter.html?collect=0">
                                        <span class="spanImg">
                                            <svg width="20" height="21" viewBox="0 0 20 21" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" class="right-entry-icon">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M11.0505 3.16759L12.7915 6.69573C12.954 7.02647 13.2702 7.25612 13.6349 7.30949L17.5294 7.87474C18.448 8.00817 18.8159 9.13785 18.1504 9.78639L15.3331 12.5334C15.0686 12.7905 14.9481 13.1609 15.0104 13.5256L15.6759 17.4031C15.8328 18.3184 14.8721 19.0171 14.0497 18.5845L10.5661 16.7537C10.2402 16.5823 9.85042 16.5823 9.52373 16.7537L6.04087 18.5845C5.21848 19.0171 4.2578 18.3184 4.41468 17.4031L5.07939 13.5256C5.14166 13.1609 5.02198 12.7905 4.75755 12.5334L1.9394 9.78639C1.27469 9.13785 1.64182 8.00817 2.56126 7.87474L6.4549 7.30949C6.82041 7.25612 7.13578 7.02647 7.29832 6.69573L9.04015 3.16759C9.45095 2.33468 10.6389 2.33468 11.0505 3.16759Z"
                                                    stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
                                                    stroke-linejoin="round"></path>
                                                <path
                                                    d="M11.603 11.8739C11.413 12.5556 10.7871 13.0554 10.0447 13.0554C9.29592 13.0554 8.66679 12.5467 8.48242 11.8569"
                                                    stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
                                                    stroke-linejoin="round"></path>
                                            </svg>
                                        </span>
                                        <span class="spanMsg1">收藏</span>
                                    </a>

                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="history.html">
                                        <span class="spanImg">
                                            <svg width="20" height="21" viewBox="0 0 20 21" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" class="right-entry-icon">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M10 1.74286C5.02955 1.74286 1 5.7724 1 10.7429C1 15.7133 5.02955 19.7429 10 19.7429C14.9705 19.7429 19 15.7133 19 10.7429C19 5.7724 14.9705 1.74286 10 1.74286ZM10.0006 3.379C14.0612 3.379 17.3642 6.68282 17.3642 10.7426C17.3642 14.8033 14.0612 18.1063 10.0006 18.1063C5.93996 18.1063 2.63696 14.8033 2.63696 10.7426C2.63696 6.68282 5.93996 3.379 10.0006 3.379Z"
                                                    fill="currentColor"></path>
                                                <path d="M9.99985 6.6521V10.743" stroke="currentColor"
                                                    stroke-width="1.7" stroke-linecap="round"></path>
                                                <path d="M12.4545 10.7427H10" stroke="currentColor" stroke-width="1.7"
                                                    stroke-linecap="round"></path>
                                            </svg>
                                        </span>
                                        <span class="spanMsg1">历史</span>
                                    </a>

                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="createCenter.html">
                                        <span class="spanImg">
                                            &nbsp;&nbsp;&nbsp;&nbsp;<svg width="20" height="21" viewBox="0 0 20 21"
                                                fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon">
                                                <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2"
                                                    y="1" width="16" height="20">
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                        d="M2.5 1.74286H17.5V20.0762H2.5V1.74286Z" fill="currentColor">
                                                    </path>
                                                </mask>
                                                <g mask="url(#mask0)">
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                        d="M9.99999 1.74286C9.92916 1.74286 9.85916 1.74369 9.78833 1.74536C5.85416 1.85453 2.58416 5.14869 2.50166 9.08286C2.44999 11.5404 3.58666 13.7304 5.36999 15.1337C5.52166 15.2529 5.63166 15.4162 5.67333 15.6045L6.30416 18.447C6.51583 19.3987 7.36083 20.0762 8.33583 20.0762H11.6617C12.6383 20.0762 13.4842 19.3987 13.6958 18.4445L14.3275 15.602C14.3692 15.4154 14.4775 15.2537 14.6275 15.1354C16.3733 13.7629 17.5 11.637 17.5 9.24286C17.5 5.10036 14.1425 1.74286 9.99999 1.74286ZM10.0003 3.40939C13.2161 3.40939 15.8336 6.02606 15.8336 9.24273C15.8336 11.0386 15.0186 12.7086 13.5978 13.8252C13.1428 14.1827 12.8244 14.6852 12.7011 15.2402L12.0686 18.0827C12.0269 18.2752 11.8586 18.4094 11.6619 18.4094H8.33609C8.14109 18.4094 7.97359 18.2761 7.93192 18.0852L7.30025 15.2427C7.17609 14.6869 6.85775 14.1827 6.40109 13.8236C4.94359 12.6769 4.12942 10.9619 4.16859 9.11773C4.23192 6.05523 6.77442 3.49606 9.83442 3.41189C9.88942 3.41023 9.94525 3.40939 10.0003 3.40939Z"
                                                        fill="currentColor"></path>
                                                    <path d="M10 6.81299L8.81253 9.18726H11.1875L9.99952 11.561"
                                                        stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
                                                        stroke-linejoin="round"></path>
                                                </g>
                                                <path d="M6.66656 15.9095H13.3332" stroke="currentColor"
                                                    stroke-width="1.7"></path>
                                            </svg>
                                        </span>
                                        <span class="spanMsg1">创作中心</span>
                                    </a>

                                </div>
                            </li>
                            <li>
                                <div id="submits">
                                    <a href="createCenter.html">
                                        <span class="spanImg1">
                                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" class="header-upload-entry__icon">
                                                <path
                                                    d="M12.0824 10H14.1412C15.0508 10 15.7882 10.7374 15.7882 11.6471V12.8824C15.7882 13.792 15.0508 14.5294 14.1412 14.5294H3.84707C2.93743 14.5294 2.20001 13.792 2.20001 12.8824V11.6471C2.20001 10.7374 2.93743 10 3.84707 10H5.90589"
                                                    stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                                    stroke-linejoin="round"></path>
                                                <path d="M8.99413 11.2353L8.99413 3.82353" stroke="currentColor"
                                                    stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                                                </path>
                                                <path d="M12.0823 6.29413L8.9941 3.20589L5.90587 6.29413"
                                                    stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                                    stroke-linejoin="round"></path>
                                            </svg>
                                        </span>
                                        <span class="spanMsg2">投稿</span>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="logoImgs">
                        <img src="img/logo.png" alt="">
                    </div>
                </div>
            </div>
    </header>
	
     <!-- 登录弹窗内容 -->
    <div class="login-overlay" id="loginOverlay">
        <div class="login-popup">
            <button class="close-btn" onclick="hideLoginPopup()">&times;</button>
            <h2 class="login-title">用户登录/注册</h2>
            <div class="tab-header">
                <span class="tab active" data-tab="login">登录</span>
                <span class="tab" data-tab="register">注册</span>
            </div>

            <!-- 登录表单 -->
            <div class="tab-content active" data-tab="login">
                <form id="loginForm">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" placeholder="请输入密码">
                    </div>
                    <div class="error-msg" id="errorMsg"></div>
                    <button type="submit" class="login-btn">确认登录</button>
                </form>
            </div>

            <!-- 注册表单 -->
            <div class="tab-content" data-tab="register">
                <form id="registerForm">
                    <div class="form-group">
                        <label for="reg-username">用户名</label>
                        <input type="text" id="reg-username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div class="gender-group">
                            <label class="radio-label">
                                <input type="radio" name="gender" value="male" required> 男
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="gender" value="female" required> 女
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="gender" value="secret" required> 保密
                            </label>
                        </div>
                    </div>

                    <!-- 分开日期选择 -->
                    <div class="form-group">
                        <label>出生日期</label>
                        <div class="birthday-group">
                            <select id="reg-year" class="birthday-select" placeholder="年份">
                                <option value="">年份</option>
                            </select>
                            <select id="reg-month" class="birthday-select" placeholder="月份">
                                <option value="">月份</option>
                            </select>
                            <select id="reg-day" class="birthday-select" placeholder="日期">
                                <option value="">日期</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="reg-email">邮箱</label>
                        <input type="email" id="reg-email" placeholder="请输入邮箱">
                    </div>
                    <div class="form-group">
                        <label for="reg-nickName">真实姓名</label>
                        <input type="nickName" id="reg-nickName" name="nickName" placeholder="请输入真实姓名">
                    </div>
                    <div class="form-group">
                        <label for="reg-password">密码（≥6位）</label>
                        <input type="password" id="reg-password" placeholder="请输入密码">
                    </div>
                    <div class="error-msg" id="reg-errorMsg"></div>
                    <button type="submit" class="login-btn">立即注册</button>
                </form>
            </div>

            <!-- 角落图片 -->
            <img src="img/小人1.jpg" class="corner-img left" id="img1">
            <img src="img/小人2.jpg" class="corner-img right" id="img2">
            <img src="img/小人3.jpg" class="corner-img left hide" id="img3">
            <img src="img/小人4.jpg" class="corner-img right hide" id="img4">
        </div>
    </div>

    <!-- 内容主体 -->
    <section id="section">
        <div id="note">
            <div id="info"></div>
            <!-- 轮播图 -->
            <div id="carousel">
                <!-- <a href="" id="lbt"> -->
                    <div id="carousel_img">
                        <div class="carousel-item active">
                            <img src="">
                        </div>
                        <div class="carousel-item">
                            <img src="">
                        </div>
                        <div class="carousel-item">
                            <img src="">
                        </div>
                        <div class="carousel-item">
                            <img src="">
                        </div>
                        <div class="carousel-item">
                            <img src="">
                        </div>
                        <div class="carousel-item">
                            <img src="">
                        </div>
                        <div class="carousel-item">
                            <img src="">
                        </div>
                        <div class="carousel-item">
                            <img src="">
                        </div>
                        <div class="carousel-item">
                            <img src="">
                        </div>
                    </div>
                <!-- </a> -->
                <div id="carousel_btnLtRt">
                    <div id="carousel_btnDiv">
                        <ul>
                            <li class="carousel_btnDiv_btn active" data-index="0"></li>
                            <li class="carousel_btnDiv_btn" data-index="1"></li>
                            <li class="carousel_btnDiv_btn" data-index="2"></li>
                            <li class="carousel_btnDiv_btn" data-index="3"></li>
                            <li class="carousel_btnDiv_btn" data-index="4"></li>
                            <li class="carousel_btnDiv_btn" data-index="5"></li>
                            <li class="carousel_btnDiv_btn" data-index="6"></li>
                            <li class="carousel_btnDiv_btn" data-index="7"></li>
                            <li class="carousel_btnDiv_btn" data-index="8"></li>
                        </ul>
                    </div>
                </div>
                <div id="direction">
                    <div class="direction-btn" id="direction_left">
                        <span>&lt;</span>
                    </div>
                    <div class="direction-btn" id="direction_right">
                        <span>&gt;</span>
                    </div>
                </div>
            </div>
            <!-- 轮播图右边 -->
            <div id="note_right">
                <div>
                    <a href="video.html" class="note_link">
                    	<input type="hidden" value="">
                        <div class="note_right_upDiv">
                            <div class="note_right_topDiv">
                                <img src="" alt="笔记图片1" class="fit-image">
                            </div>
                            <div class="note_right_inDiv">
                                <p class="note_title">笔记标题1</p>
                            </div>
                        </div>
                    </a>
                    <a href="video.html" class="note_right_a">这是笔记的简要内容描述</a>
                </div>
                <div>
                    <a href="video.html" class="note_link">
                    	<input type="hidden" value="">
                        <div class="note_right_upDiv">
                            <div class="note_right_topDiv">
                                <img src="" alt="笔记图片1" class="fit-image">
                            </div>
                            <div class="note_right_inDiv">
                                <p class="note_title">笔记标题2</p>
                            </div>
                        </div>
                    </a>
                    <a href="video.html" class="note_right_a">这是笔记的简要内容描述</a>
                </div>
                <div>
                    <a href="video.html" class="note_link">
                    	<input type="hidden" value="">
                        <div class="note_right_upDiv">
                            <div class="note_right_topDiv">
                                <img src="" alt="笔记图片1" class="fit-image">
                            </div>
                            <div class="note_right_inDiv">
                                <p class="note_title">笔记标题3</p>
                            </div>
                        </div>
                    </a>
                    <a href="video.html" class="note_right_a">这是笔记的简要内容描述</a>
                </div>
                <div>
                    <a href="video.html" class="note_link">
                    	<input type="hidden" value="">
                        <div class="note_right_upDiv">
                            <div class="note_right_topDiv">
                                <img src="" alt="笔记图片1" class="fit-image">
                            </div>
                            <div class="note_right_inDiv">
                                <p class="note_title">笔记标题4</p>
                            </div>
                        </div>
                    </a>
                    <a href="video.html" class="note_right_a">这是笔记的简要内容描述</a>
                </div>
                <div>
                    <a href="video.html" class="note_link">
                    	<input type="hidden" value="">
                        <div class="note_right_upDiv">
                            <div class="note_right_topDiv">
                                <img src="" alt="笔记图片1" class="fit-image">
                            </div>
                            <div class="note_right_inDiv">
                                <p class="note_title">笔记标题5</p>
                            </div>
                        </div>
                    </a>
                    <a href="video.html" class="note_right_a">这是笔记的简要内容描述</a>
                </div>
                <div>
                    <a href="video.html" class="note_link">
                    	<input type="hidden" value="">
                        <div class="note_right_upDiv">
                            <div class="note_right_topDiv">
                                <img src="" alt="笔记图片1" class="fit-image">
                            </div>
                            <div class="note_right_inDiv">
                                <p class="note_title">笔记标题6</p>
                            </div>
                        </div>
                    </a>
                    <a href="video.html" class="note_right_a">这是笔记的简要内容描述</a>
                </div>
            </div>
            <!-- 轮播图下面 -->
            <div id="note_bottom">
         
            </div>
        </div>
    </section>
    <!-- 分页 -->
    <div id="pageBar"></div>
 <script>
 $(document).ready(function() {
	 // 在 document.ready 函数内添加以下代码

	 // 1. 检查URL参数并弹出登录框
	 const urlParams = new URLSearchParams(window.location.search);
	 if (urlParams.get('showLogin') === 'true') {
	     showLoginPopup(); // 调用显示登录弹窗函数
	 }

	 // 2. 添加全局AJAX错误处理
	 $(document).ajaxError(function(event, jqXHR) {
	     if (jqXHR.status === 401) { // 未授权状态码
	         showLoginPopup(); // 显示登录弹窗
	     }
	 });
	 
	 
	    // 检查用户是否已登录
	    function checkLoginStatus() {
	        const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
	        if (isLoggedIn) {
	            // 显示头像，隐藏登录按钮
	            $('#login').hide();
	            $('#userAvatar').show();
	            
	            // 获取用户头像 URL
	            const avatarUrl = localStorage.getItem('avatarUrl');
	            $('#avatarImg').attr('src', avatarUrl);
	            console.log(avatarUrl);
	        }
	    }
	    
	    // 登录成功后调用
	    function onLoginSuccess(username, avatarUrl, userId) {
	        // 保存登录状态
	        localStorage.setItem('isLoggedIn', 'true');
	        localStorage.setItem('username', username);
	        localStorage.setItem('avatarUrl', avatarUrl);
	        localStorage.setItem('userId', userId);
	        
	        // 更新 UI
	        checkLoginStatus();
	        
	        // 跳转到用户页面
	        window.location.href = '/bilibili0/index.html';
	    }
	    
	    // 初始化
	    checkLoginStatus();
	    
	    // 头像点击事件 - 跳转到用户页面
	    $('#userAvatar').click(function() {
	        window.location.href = '/bilibili0/personalCenter.html';
	    });
	    
	    // 修改登录成功回调，添加对 onLoginSuccess 的调用
	    $('#loginForm').on('submit', function(e) {
	        e.preventDefault();
	        const username = $('#username').val();
	        const password = $('#password').val();
	        const errorEl = $('#errorMsg');
	        
	        // 验证输入
	        if (!username || !password) {
	            errorEl.text('请填写用户名和密码');
	            return;
	        }
	        
	        $.ajax({
	            type: 'POST',
	            url: '/bilibili0/login.do',
	            data: {
	                username: username,
	                password: password
	            },
	            dataType: 'json',
	            xhrFields: {
	                withCredentials: true
	            },
	            crossDomain: true,
	            success: function(data) {
	                console.log('登录成功，服务器返回:', data);
	                if (data.success) {
	                    // 调用登录成功处理函数
	                    onLoginSuccess(
	                        username,
	                        data.data.avatarUrl ,
	                        data.data.userId
	                    );
	                    
	                    // 关闭登录弹窗
	                    hideLoginPopup();
	                } else {
	                    errorEl.text(data.message || '登录失败，请重试');
	                }
	            },
	            error: function(error) {
	                console.error('登录请求失败:', error);
	                errorEl.text('网络错误，请稍后重试');
	            }
	        });
	    });
	    
	   
	    
	    // 头像和菜单交互逻辑优化
	    const avatar = $('#userAvatar');
	    const menu = $('#userMenu');
	    let hideTimer;
	    let isMenuVisible = false;

	    // 显示菜单
	    function showMenu() {
	        clearTimeout(hideTimer);
	        const avatarPos = avatar.offset();
	        const avatarHeight = avatar.outerHeight();
	        
	        menu.css({
	            top: avatarPos.top + avatarHeight + 10,
	            left: avatarPos.left,
	            visibility: 'visible',
	            opacity: 1
	        });
	        isMenuVisible = true;
	    }

	    // 隐藏菜单
	    function hideMenu() {
	        hideTimer = setTimeout(() => {
	            menu.css({
	                visibility: 'hidden',
	                opacity: 0
	            });
	            isMenuVisible = false;
	        }, 300); // 300ms延迟，确保鼠标有足够时间移动到菜单
	    }

	    // 头像鼠标进入
	    avatar.on('mouseenter', showMenu);
	    
	    // 头像鼠标离开
	    avatar.on('mouseleave', function(e) {
	        // 检查鼠标是否移动到菜单上
	        if (!menu.is(e.relatedTarget) && !menu.has(e.relatedTarget).length) {
	            hideMenu();
	        }
	    });

	    // 菜单鼠标进入
	    menu.on('mouseenter', function() {
	        clearTimeout(hideTimer);
	    });
	    
	    // 菜单鼠标离开
	    menu.on('mouseleave', function(e) {
	        // 检查鼠标是否移动到头像上
	        if (!avatar.is(e.relatedTarget) && !avatar.has(e.relatedTarget).length) {
	            hideMenu();
	        }
	    });

	    // 登录模块全局函数
	    function showLoginPopup() {
	        $('#loginOverlay').show();
	    }

	    function hideLoginPopup() {
	        $('#loginOverlay').hide();
	    }
	    
	    // 初始化出生日期选择
	    function initBirthdaySelectors() {
	        const yearSelect = $('#reg-year');
	        const monthSelect = $('#reg-month');
	        const daySelect = $('#reg-day');
	        
	        // 填充年份 (过去100年)
	        const currentYear = new Date().getFullYear();
	        for (let year = currentYear; year >= currentYear - 100; year--) {
	            yearSelect.append(`<option value="${year}">${year}</option>`);
	        }
	        
	        // 填充月份
	        for (let month = 1; month <= 12; month++) {
	            monthSelect.append(`<option value="${month}">${month}</option>`);
	        }
	        
	        // 监听年份和月份变化，更新日期选项
	        yearSelect.add(monthSelect).on('change', function() {
	            const year = parseInt(yearSelect.val());
	            const month = parseInt(monthSelect.val());
	            
	            // 清空现有日期选项
	            daySelect.html('<option value="">日期</option>');
	            
	            if (year && month) {
	                // 计算当月天数
	                const daysInMonth = new Date(year, month, 0).getDate();
	                
	                // 填充日期
	                for (let day = 1; day <= daysInMonth; day++) {
	                    daySelect.append(`<option value="${day}">${day}</option>`);
	                }
	            }
	        });
	    }
	    
	    // 初始化
	    initBirthdaySelectors();
	    
	    // 登录按钮点击事件
	    $('#loginBtn').on('click', showLoginPopup);
	    $('.close-btn').on('click', hideLoginPopup);
	    
	    // 处理注册表单提交
	    $('#registerForm').on('submit', function(e) {
	        e.preventDefault();
	        const regUsername = $('#reg-username').val().trim();
	        const regEmail = $('#reg-email').val().trim();
	        const regPassword = $('#reg-password').val().trim();
	        const errorEl = $('#reg-errorMsg');
	        
	        // 获取真实姓名
	        const nickName = $("#reg-nickName").val();
	        
	        // 获取性别
	        const regGender = $('input[name="gender"]:checked').val() || '';
	        
	        // 获取日期
	        const year = $('#reg-year').val();
	        const month = $('#reg-month').val();
	        const day = $('#reg-day').val();
	        const regBirthday = year && month && day ? `${year}-${month}-${day}` : '';
	        
	        // 验证
	        if (!regGender) {
	            errorEl.text('请选择性别');
	            return;
	        }
	        if (!regBirthday) {
	            errorEl.text('请选择完整的出生日期');
	            return;
	        }
	        if (isNaN(Date.parse(regBirthday))) {
	            errorEl.text('出生日期无效');
	            return;
	        }
	        if (!regUsername || !regEmail || !regPassword) {
	            errorEl.text('请填写所有注册信息');
	            return;
	        }
	        if (regPassword.length < 6) {
	            errorEl.text('密码至少需要6位');
	            return;
	        }
	        
	        $.ajax({
	            type: 'POST',
	            url: '/bilibili0/register.do',
	            data: {
	                username: regUsername,
	                gender: regGender,
	                birthday: regBirthday,
	                nickName: nickName,
	                email: regEmail,
	                password: regPassword
	            },
	            success: function(data) {
	                console.log('服务器返回的数据:', data);
	                if (data.success) {
	                    alert('注册成功！请登录');
	                    // 切换到登录选项卡
	                    $('[data-tab="login"]').trigger('click');
	                    // 清空注册表单
	                    $('#registerForm')[0].reset();
	                } else {
	                    errorEl.text(data.message || '注册失败，请重试');
	                }
	            },
	            error: function(error) {
	                console.error('注册请求失败:', error);
	                errorEl.text('网络错误，请稍后重试');
	            }
	        });
	    });
	    
	    // 标签页切换逻辑
	    $('.tab').on('click', function() {
	        const tabName = $(this).attr('data-tab');

	        // 移除所有标签页的活跃状态
	        $('.tab').removeClass('active');
	        $('.tab-content').removeClass('active');

	        // 添加当前标签页的活跃状态
	        $(this).addClass('active');
	        $(`.tab-content[data-tab="${tabName}"]`).addClass('active');
	        
	        // 更新角落图片
	        if (tabName === 'login') {
	            $('#img1, #img2').removeClass('hide');
	            $('#img3, #img4').addClass('hide');
	        } else {
	            $('#img1, #img2').addClass('hide');
	            $('#img3, #img4').removeClass('hide');
	        }
	    });
	    
	    // 额外的原生JavaScript事件处理
	    window.showLoginPopup = showLoginPopup;
	    window.hideLoginPopup = hideLoginPopup;
	});
 
 
	 showVideoImg();
	//获取所有具有指定class的img元素
	var imgs = Array.from(document.getElementsByClassName('fit-image'));
	//获取所有具有指定class的<视频标题>元素
	var titles = Array.from(document.getElementsByClassName('note_title'));
	//获取所有具有指定class的<视频简介>元素
	var introductions = Array.from(document.getElementsByClassName('note_right_a'));
	//获取所有具有指定class的<轮播图>元素
	var carouselImgs = Array.from(document.querySelectorAll('#carousel_img img'));
	function showVideoImg() {
	    $.ajax({
	        type: "GET",
	        url: "selectVideo.do",
	        success: function(data) {
	        	console.log(data)
	        	//判断data是不是null和data是不是数组
	            if (data == null || !Array.isArray(data)) {
	                console.error('返回的数据无效');
	                return;
	            }
	            let note_bottom_video="";
	            for (var i = 6; i < data.length; i++) {
	            	$("#note_bottom").empty();
	                // 轮播图下面
	                if (data[i].coverUrl != null && data[i].title != null && data[i].description != null) {
	                	note_bottom_video += `
	                		 <div class="note_bottom_upDiv">
	                        	<a href="video.html" class="note_link">
	                        	<input type="hidden" value="${data[i].videoId}">
	                            <div>
	                                <div class="note_right_topDiv">
	                                    <img src="${data[i].coverUrl}" alt="笔记图片1" class="fit-image">
	                                </div>
	                                <div class="note_right_inDiv">
	                                    <p class="note_title">${data[i].title}</p>
	                                </div>
	                            </div>
	                        </a>
	                        <a href="video.html" class="note_right_a">${data[i].description}</a>
	                    </div>
	                	`;
	          	    }
	                $("#note_bottom").append(note_bottom_video);
	            }
	            //轮播图
	            for(var i=0;i<carouselImgs.length;i++){
	            	carouselImgs[i].src = data[i].coverUrl;
	            	let inputA = `<input type='hidden' value='${data[i].videoId}'>`;
	            	$(".carousel-item").eq(i).append(inputA)
	            }
	            // 轮播图右边
	            for(var i=0;i<imgs.length;i++){
	            	imgs[i].src = data[i].coverUrl;
	            	titles[i].textContent=data[i].title;
	            	introductions[i].textContent=data[i].description;
	            	$(".note_link input").eq(i).val(data[i].videoId);
	            }
	        },
	        error: function(xhr, status, error) {
	            console.error('AJAX请求失败:', status, error);
	        }
	    });
	}
	
	var sourceBtn=document.getElementById("logo_top_middle_right");
	let currentPage = 1;
	sourceBtn.addEventListener("click",function(){
		searchVideo(1);
	})
	
	function searchVideo(pageNum){
		var pageSize=10;
		var likeName=$("#likeVideoInput").val();;
		console.log(likeName=="");
		$.ajax({
			type:"POST",
			url:"selectLikeVideo.do",
			data:{
				likeName:likeName,
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				let videos=data.data.data;
				if(data.code == 200 ){
					let htmlContent="";
					for (var i = 0; i < videos.length; i++) {
						$("#note").empty();
						htmlContent += `<div style="width:310px;height:279.99px;display:inline-block;margin-left:10px;margin-top:10px;border-radius:5%">
											<a href="video.html" class="note_link">
				        						<input type="hidden" value="${videos[i].videoId}">
				                        		<div>
				                            		<div class="note_right_topDiv" style="width:310px;height:212px">
				                                		<img src="${videos[i].coverUrl}" alt="笔记图片1" class="fit-image" style="width:320px;height:212px">
				                            		</div>
				                            		<div class="note_right_inDiv">
				                                		<p class="note_title" style="width:310px;height:25.6px">${videos[i].title}</p>
				                            		</div>
				                        		</div>
				                    		</a>
				                    		<a href="video.html" class="note_right_a" style="width:310px;height:22.39px">${videos[i].description}</a>
				                    	</div>`;
						$("#note").append(htmlContent);
		            }
					
					makePageNum(data.data);
					//恢复滚动
					 document.body.style.overflow = '';
					 document.documentElement.style.overflow = '';
				}else if(data.code == 409){
						$("#note").empty();
						$("#note").append(`<div style="margin-top:200px; margin-left:750px">
											<img src="img/ZFZJ.svg">
											<p style="font-size: 13px; color: #A8ACB2">好像没有东西欸（：'⌒'）</p>
											</div>`);
						//禁用滚动
						document.body.style.overflow = 'hidden';
					    // 或者针对html和body同时设置
					    document.documentElement.style.overflow = 'hidden';
					    document.body.style.overflow = 'hidden';
				}else {
						
				}
			}
		})
		
	}
	
	
	function makePageNum(page){
		let pageBar=$("#pageBar");
		let navigatorNums=page.totalPageNum;
		pageBar.empty();
		let firstPage = $("<button onclick='searchVideo(1)'>首页</button>");
		pageBar.append(firstPage);
		
		if(page.hasPrev){
			let prevPage=$("<button>上一页</button>").click(function(){
				searchVideo(currentPage-1);
				currentPage--;
				if(currentPage == 1){
					currentPage = 1;
				}
			});
			pageBar.append(prevPage);
		} 
		
		for(let i=0;i<navigatorNums.length;i++){
			let num=navigatorNums[i];
			if(num == currentPage){
				pageBar.append('<button id="pnA" class="currentPage" onclick="searchVideo('+num+')">'+num+'</button>');
			}else{
				pageBar.append('<button id="pnA" onclick="searchVideo('+num+')">'+num+'</button>');
			}
		}
		
		if(page.hasNext){
			let nextPage=$("<button>下一页</botton>").click(function(){
				
				currentPage++;
				searchVideo(currentPage)
				if(currentPage == page.totalPages){
					currentPage = page.totalPages;
				}
			});
			pageBar.append(nextPage);
		}
		
		let lastPage="<button onclick='searchVideo("+page.totalPages+")'>尾页</button>";
		pageBar.append(lastPage);
	}
	
 // 退出登录函数
 function logout() {
     $.ajax({
         type: 'POST',
         url: '/bilibili0/logout.do',
         xhrFields: {
             withCredentials: true
         },
         crossDomain: true,
         success: function(data) {
             console.log('退出登录成功:', data);
             alert('您已退出登录');
             
             // 清除本地存储
             localStorage.removeItem('isLoggedIn');
             localStorage.removeItem('username');
             localStorage.removeItem('avatarUrl');
             localStorage.removeItem('userId');
             
             // 更新UI
             $('#login').show();
             $('#userAvatar').hide();
             $('#userMenu').hide();
             
             // 刷新页面
             window.location.reload();
         },
         error: function(jqXHR, textStatus, errorThrown) {
        	    if (jqXHR.status === 404) {
        	        alert('退出登录失败：请求地址不存在');
        	    } else if (jqXHR.status === 500) {
        	        alert('退出登录失败：服务器内部错误');
        	    } else {
        	        alert('退出登录失败：' + textStatus + ', ' + errorThrown);
        	    }
        	    console.log('完整错误信息:', jqXHR);
        	}
     });
 }
 
 
 
    </script>
</body>
</html>